<template>
  <div>
    <van-nav-bar title="修改资料"
                 left-text="返回"
                 left-arrow
                 fixed
                 @click-left="onClickLeft" />
    <!-- 头像 -->
    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="user">
      <div class="user-image">
        <img :src="LoginUser.avatar"
             alt="">
      </div>
    </div>
    <!-- 表单 -->
    <van-form @submit="profile">
      <van-cell-group inset>
        <van-field v-model="LoginUser.nickname"
                   name="nickname"
                   label="用户名"
                   placeholder="请输入用户名"
                   :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="LoginUser.email"
                   name="email"
                   label="邮箱"
                   readonly="ture" />
        <van-field v-model="LoginUser.password"
                   type="password"
                   name="密码"
                   label="密码"
                   placeholder="密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <!-- 性别 -->
        <van-field name="sex"
                   label="性别">
          <template #input>
            <van-radio-group v-model="LoginUser.sex"
                             direction="horizontal">
              <van-radio name="0">保密</van-radio>
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 地区 -->
        <van-field v-model="LoginUser.region_text"
                   is-link
                   readonly
                   name="area"
                   label="地区选择"
                   placeholder="点击选择省市区"
                   @click="showArea = true" />
        <van-popup :show="showArea"
                   position="bottom">
          <van-area :value="region"
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false" />
        </van-popup>
        <!-- 个人简介 -->
        <van-field v-model="LoginUser.content"
                   name="content"
                   rows="2"
                   autosize
                   label="个人简介"
                   type="textarea"
                   maxlength="50"
                   placeholder="请输入留言"
                   show-word-limit />
        <!--改头像 -->
        <van-field name="avatar"
                   label="修改头像">
          <template #input>
            <van-uploader v-model="avatar"
                          :max-count="1" />
          </template>
        </van-field>
        <!-- 修改背景 -->
        <van-field name="cover"
                   label="修改背景"
                   :max-count="1">
          <template #input>
            <van-uploader v-model="cover" />
          </template>
        </van-field>

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="primary"
                    native-type="submit">
          更新资料
        </van-button>
      </div>
    </van-form>

  </div>
</template>
<script>
// 安装地区和省组件yarn add @vant/area-data
// 引用组件
import { areaList } from '@vant/area-data'
export default {
  data() {
    return {
      areaList,
      LoginUser: this.$cookies.get('LoginUser'),
      showArea: false,
      avatar: [
        {
          url: this.$cookies.get('LoginUser').avatar,
        },
      ],
      cover: [
        {
          url: this.$cookies.get('LoginUser').cover,
        },
      ],
    }
  },
  methods: {
    onClickLeft() {
      // 返回上一层页面
      this.$router.go(-1)
    },
    // async在异步时调用 即点击提交按钮时调用
    // form为表单提交的内容
    async profile(form) {
      //this.LoginUser为属性
      if (this.LoginUser.province) {
        form.code = this.LoginUser.province
      }
      if (this.LoginUser.city) {
        form.code = this.LoginUser.city
      }
      if (this.LoginUser.district) {
        form.code = this.LoginUser.district
      }
      //   获取表单的数据
      if (this.avatar) {
        // console.log(this.avatar[0].file)
        form.avatar = this.avatar[0].file
      }

      if (this.cover) {
        form.cover = this.cover[0].file
      }
      //   追加id，为了获取更新数据索引
      if (this.LoginUser.id) {
        form.id = this.LoginUser.id
      }
      var result = await this.$api.profile(form)
      if (result.code === 1) {
        this.$notify({
          type: 'success',
          message: result.msg,
          duration: 1500,
          onClose: () => {
            this.$router.push(result.url)
          },
        })
        return false
      } else {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        return false
      }
    },
    onConfirm(value) {
      // 获取选择的省市区
      console.log(value)
      let [province, city, district] = value
      var region_text = ''
      if (province) {
        region_text += province.name + '-'
        this.LoginUser.province = province.code
      }
      if (city) {
        region_text += city.name + '-'
        this.LoginUser.city = city.code
      }
      if (district) {
        region_text += district.name
        this.LoginUser.district = district.code
      }
      //   console.log(region_text)
      //   将值给到数据库
      this.LoginUser.region_text = region_text
      // 关闭提示
      this.showArea = false
    },
  },
  computed: {
    region() {
      // 为了让选择的时候默认选择当前地区
      let province = this.LoginUser.province
      let city = this.LoginUser.city
      let district = this.LoginUser.district
      let region = ''
      if (province) {
        region = province
      }
      if (city) {
        region = city
      }
      if (district) {
        region = district
      }
      //   原本拿到的是int整数类型 这里期望的参数类型为String
      return region.toString()
    },
  },
}
</script>
<style>
@import url('/assets/css/profile.css');
.h50 {
  height: 50px;
}
.van-cell-group--inset {
  margin: 0px;
  border-radius: 0px;
  overflow: hidden;
}
</style>